import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 改为动态导入
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'

import '@/styles/index.scss' // global css
import '@/icons/iconfont.css'

import App from './App'
import store from './store'
import router from './router'

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

import '@/icons' // icon
import '@/permission' // permission control
// import '@/utils/directive'

import { LMap, LTileLayer, LMarker, LPopup, LTooltip, LControl, LIcon, LCircle, LCircleMarker, LPolyline, LPolygon } from 'vue2-leaflet'
import 'leaflet/dist/leaflet.css'

Vue.component('l-map', LMap)
Vue.component('l-tile-layer', LTileLayer)
Vue.component('l-marker', LMarker)
Vue.component('l-popup', LPopup)
Vue.component('l-tooltip', LTooltip)
Vue.component('l-control', LControl)
Vue.component('l-icon', LIcon)
Vue.component('l-circle', LCircle)
Vue.component('l-circle-marker', LCircleMarker)
Vue.component('l-polyline', LPolyline)
Vue.component('l-polygon', LPolygon)

import VeRing from 'v-charts/lib/ring.common'
import VeBar from 'v-charts/lib/bar.common'
import VeLine from 'v-charts/lib/line.common'
import Vehistogram from 'v-charts/lib/histogram.common'
import 'echarts/lib/component/dataZoom'
Vue.component(VeRing.name, VeRing)
Vue.component(VeBar.name, VeBar)
Vue.component(VeLine.name, VeLine)
Vue.component(Vehistogram.name, Vehistogram)

import elDragDialog from '@/directive/el-drag-dialog'
Vue.directive('el-drag-dialog', elDragDialog)

Vue.prototype.globalClick = (callback) => {
  document.ondblclick = () => {
    callback()
  }
  // document.onkeydown = (event) => {
  //   if (event.keyCode === 13) {
  //     callback()
  //   }
  // }
}

import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  ToolboxComponent,
  GridComponent
])

Vue.component(VChart)

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
locale.use(zhLocale)
Vue.use(ElementUI, { locale, size: 'small' })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// 防止多个 message 同时出现
let messageInstance = null
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = ElementUI.Message(options)
}
['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = (options) => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})
Vue.prototype.$message = resetMessage

Vue.config.productionTip = false

import { i18n } from './i18n/index'
i18n.locale = localStorage.getItem('locale') || 'zh'
if (i18n.locale === 'en') {
  locale.use(enLocale)
} else {
  locale.use(zhLocale)
}

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  // 监听语言变化
  watch: {
    'i18n.locale': function(newVal) {
      if (newVal === 'en') {
        locale.use(enLocale)
      } else {
        locale.use(zhLocale)
      }
      localStorage.setItem('locale', newVal)
    }
  },
  render: h => h(App)
})
